<template>
  <el-table :data="Article">
    <el-table-column prop="title" label="标题" width="140"></el-table-column>
    <el-table-column prop="body" label="内容" width="120"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="Edit(scope.row._id)">编辑</el-button>
        <el-button size="mini" @click="remove(scope.row._id)" type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
        Article: []
    };
  },
  created() {
    this.getArticles();
  },
  methods: {
      getArticles() {
          this.$http.get('articles')
            .then(res => {
                this.Article = res.data;
            })
      },
      Edit(id) {
          this.$router.push(`/articles/${id}/edit`);
      },
      remove(id) {
          this.$http.delete(`articles/${id}`)
            .then(res => {
                if(res.status) {
                    this.$message({
                        message: "删除成功",
                        type: "success"
                    });
                    this.getArticles();
                }
            })
      }
  }
};
</script>

<style>
</style>
